<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CH洗衣客系统 - 个人中心</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        .avatar-upload {
            position: relative;
            display: inline-block;
        }
        .avatar-upload input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .order-tab {
            scrollbar-width: none;
        }
        .order-tab::-webkit-scrollbar {
            display: none;
        }
        .icon-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body class="min-h-[1024px] bg-gray-50 font-sans text-gray-800">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <a href="index.html" class="text-2xl font-['Pacifico'] text-primary">CH洗衣客系统</a>
                <h1 class="text-xl font-semibold">个人中心</h1>
            </div>
            <button class="flex items-center space-x-2 text-gray-600 hover:text-primary transition-colors">
                <i class="fas fa-chevron-left icon-wrapper w-4 h-4"></i>
                <a href="index.html" >返回首页</a>
            </button>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-6 py-8">
        <!-- 用户信息卡片 -->
        <div class="bg-white rounded-xl shadow-md p-6 mb-8">
            <div class="flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-6">
                <div class="avatar-upload">
                    <div class="w-24 h-24 rounded-full bg-gray-200 overflow-hidden">
                        <img src="https://ai-public.mastergo.com/ai/img_res/ea9d24d7b4eec2390a5d10658fcc5daa.jpg"
                             alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    <input type="file" accept="image/*">
                    <div class="absolute bottom-0 right-0 bg-primary text-white rounded-full p-1.5">
                        <i class="fas fa-camera icon-wrapper w-4 h-4"></i>
                    </div>
                </div>

                <div class="flex-1">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
                        <div>
                            <h2 class="text-2xl font-bold">林晓雯</h2>
                            <div class="flex items-center mt-2 space-x-2">
                                <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">黄金会员</span>
                                <span class="text-gray-600">积分: 2,850</span>
                            </div>
                        </div>
                        <button class="!rounded-button bg-primary hover:bg-blue-600 text-white px-4 py-2 whitespace-nowrap">
                            <i class="fas fa-user-edit icon-wrapper w-4 h-4 mr-2"></i>
                            编辑资料
                        </button>
                    </div>

                    <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="bg-gray-50 p-3 rounded-lg">
                            <div class="text-gray-500 text-sm">手机号码</div>
                            <div class="font-medium mt-1">138 1234 5678</div>
                        </div>
                        <div class="bg-gray-50 p-3 rounded-lg">
                            <div class="text-gray-500 text-sm">电子邮箱</div>
                            <div class="font-medium mt-1">xiaowen.lin@example.com</div>
                        </div>
                        <div class="bg-gray-50 p-3 rounded-lg">
                            <div class="text-gray-500 text-sm">注册时间</div>
                            <div class="font-medium mt-1">2022-03-15</div>
                        </div>
                        <div class="bg-gray-50 p-3 rounded-lg">
                            <div class="text-gray-500 text-sm">最近登录</div>
                            <div class="font-medium mt-1">2023-11-28</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单信息模块 -->
        <div class="bg-white rounded-xl shadow-md p-6 mb-8">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold">我的订单</h3>
                <a href="#" class="text-primary hover:text-blue-600 flex items-center">
                    <span>查看全部</span>
                    <i class="fas fa-chevron-right icon-wrapper w-3 h-3 ml-1"></i>
                </a>
            </div>

            <div class="order-tab flex overflow-x-auto pb-2 -mx-2">
                <a href="#" class="flex flex-col items-center px-4 py-2 rounded-lg hover:bg-gray-50 min-w-[100px]">
                    <div class="relative">
                        <i class="fas fa-money-bill-wave text-2xl text-gray-400 icon-wrapper w-8 h-8"></i>
                        <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
                    </div>
                    <span class="mt-2 text-sm">待付款</span>
                </a>
                <a href="#" class="flex flex-col items-center px-4 py-2 rounded-lg hover:bg-gray-50 min-w-[100px]">
                    <div class="relative">
                        <i class="fas fa-clock text-2xl text-gray-400 icon-wrapper w-8 h-8"></i>
                        <span class="absolute -top-1 -right-1 bg-orange-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">2</span>
                    </div>
                    <span class="mt-2 text-sm">待服务</span>
                </a>
                <a href="#" class="flex flex-col items-center px-4 py-2 rounded-lg hover:bg-gray-50 min-w-[100px]">
                    <div class="relative">
                        <i class="fas fa-spinner text-2xl text-gray-400 icon-wrapper w-8 h-8"></i>
                        <span class="absolute -top-1 -right-1 bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">1</span>
                    </div>
                    <span class="mt-2 text-sm">进行中</span>
                </a>
                <a href="#" class="flex flex-col items-center px-4 py-2 rounded-lg hover:bg-gray-50 min-w-[100px]">
                    <i class="fas fa-check-circle text-2xl text-gray-400 icon-wrapper w-8 h-8"></i>
                    <span class="mt-2 text-sm">已完成</span>
                </a>
                <a href="#" class="flex flex-col items-center px-4 py-2 rounded-lg hover:bg-gray-50 min-w-[100px]">
                    <i class="fas fa-list text-2xl text-gray-400 icon-wrapper w-8 h-8"></i>
                    <span class="mt-2 text-sm">全部订单</span>
                </a>
            </div>

            <div class="mt-6 border-t pt-6">
                <h4 class="text-md font-medium mb-4">最近订单</h4>
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-primary bg-opacity-10 rounded-full flex items-center justify-center">
                                <i class="fas fa-tshirt text-primary icon-wrapper w-5 h-5"></i>
                            </div>
                            <div>
                                <div class="font-medium">订单 #WX20231128001</div>
                                <div class="text-sm text-gray-500">羽绒服清洗 · 2件</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="font-medium">¥89.00</div>
                            <div class="text-sm text-gray-500">2023-11-28</div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-primary bg-opacity-10 rounded-full flex items-center justify-center">
                                <i class="fas fa-shoe-prints text-primary icon-wrapper w-5 h-5"></i>
                            </div>
                            <div>
                                <div class="font-medium">订单 #WX20231125002</div>
                                <div class="text-sm text-gray-500">运动鞋保养 · 1双</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="font-medium">¥45.00</div>
                            <div class="text-sm text-gray-500">2023-11-25</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 功能区块 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
            <a href="#" class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-wallet text-primary icon-wrapper w-5 h-5"></i>
                    </div>
                    <div>
                        <div class="font-medium">我的钱包</div>
                        <div class="text-sm text-gray-500">余额 ¥256.50</div>
                    </div>
                </div>
            </a>
            <a href="#" class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-map-marker-alt text-secondary icon-wrapper w-5 h-5"></i>
                    </div>
                    <div>
                        <div class="font-medium">收货地址</div>
                        <div class="text-sm text-gray-500">3个地址</div>
                    </div>
                </div>
            </a>
            <a href="#" class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-tag text-yellow-600 icon-wrapper w-5 h-5"></i>
                    </div>
                    <div>
                        <div class="font-medium">优惠券</div>
                        <div class="text-sm text-gray-500">5张可用</div>
                    </div>
                </div>
            </a>
            <a href="#" class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-gift text-purple-600 icon-wrapper w-5 h-5"></i>
                    </div>
                    <div>
                        <div class="font-medium">积分商城</div>
                        <div class="text-sm text-gray-500">2,850积分</div>
                    </div>
                </div>
            </a>
            <a href="#" class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-credit-card text-red-600 icon-wrapper w-5 h-5"></i>
                    </div>
                    <div>
                        <div class="font-medium">支付方式</div>
                        <div class="text-sm text-gray-500">2种支付方式</div>
                    </div>
                </div>
            </a>
            <a href="#" class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-headset text-indigo-600 icon-wrapper w-5 h-5"></i>
                    </div>
                    <div>
                        <div class="font-medium">客服中心</div>
                        <div class="text-sm text-gray-500">24小时在线</div>
                    </div>
                </div>
            </a>
            <a href="#" class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-pink-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-history text-pink-600 icon-wrapper w-5 h-5"></i>
                    </div>
                    <div>
                        <div class="font-medium">洗衣记录</div>
                        <div class="text-sm text-gray-500">查看历史</div>
                    </div>
                </div>
            </a>
            <a href="#" class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-cog text-gray-600 icon-wrapper w-5 h-5"></i>
                    </div>
                    <div>
                        <div class="font-medium">设置</div>
                        <div class="text-sm text-gray-500">账户与安全</div>
                    </div>
                </div>
            </a>
        </div>

        <!-- 底部安全退出 -->
        <div class="text-center">
            <button onclick="confirmLogout()" class="!rounded-button bg-red-500 hover:bg-red-600 text-white px-6 py-3 whitespace-nowrap">
                <i class="fas fa-sign-out-alt icon-wrapper w-4 h-4 mr-2"></i>
                安全退出
            </button>
        </div>
    </main>

    <!-- 编辑资料弹窗 -->
    <div id="edit-modal" class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-md relative">
            <button class="absolute top-2 right-2 text-gray-400 hover:text-primary" onclick="closeEditModal()"><i class="fas fa-times"></i></button>
            <h2 class="text-xl font-bold mb-4">编辑资料</h2>
            <form id="edit-form" class="space-y-4">
                <div>
                    <label class="block text-sm text-gray-600 mb-1">昵称</label>
                    <input type="text" name="nickname" class="w-full border border-gray-300 rounded px-3 py-2" required>
                </div>
                <div>
                    <label class="block text-sm text-gray-600 mb-1">电子邮箱</label>
                    <input type="email" name="email" class="w-full border border-gray-300 rounded px-3 py-2" required>
                </div>
                <button type="submit" class="w-full bg-primary text-white rounded py-2 font-medium mt-2">保存</button>
            </form>
        </div>
    </div>

    <!-- 订单详情弹窗 -->
    <div id="order-detail-modal" class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-md relative">
            <button class="absolute top-2 right-2 text-gray-400 hover:text-primary" onclick="closeOrderDetailModal()"><i class="fas fa-times"></i></button>
            <h2 class="text-xl font-bold mb-4">订单详情</h2>
            <div id="order-detail-content" class="space-y-2 text-gray-700 text-base"></div>
        </div>
    </div>

    <!-- 功能区块弹窗 -->
    <div id="feature-modal" class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-md relative">
            <button class="absolute top-2 right-2 text-gray-400 hover:text-primary" onclick="closeFeatureModal()"><i class="fas fa-times"></i></button>
            <h2 class="text-xl font-bold mb-4" id="feature-modal-title">功能详情</h2>
            <div id="feature-modal-content" class="space-y-2 text-gray-700 text-base"></div>
        </div>
    </div>

    <script>
        function confirmLogout() {
            if(confirm('确定要退出登录吗？')) {
                alert('您已成功退出登录');
                // 实际应用中这里应该是跳转到登录页
                window.location.href = '../register.html';
            }
        }

        // 1. 头像上传即时预览
        document.querySelector('.avatar-upload input[type="file"]').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(evt) {
                    document.querySelector('.avatar-upload img').src = evt.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        // 2. 编辑资料弹窗
        const editModal = document.getElementById('edit-modal');
        function closeEditModal() { editModal.classList.add('hidden'); }
        document.querySelector('.fa-user-edit').closest('button').onclick = function() {
            // 填充当前昵称和邮箱
            document.querySelector('#edit-form [name="nickname"]').value = document.querySelector('h2.text-2xl').textContent.trim();
            document.querySelector('#edit-form [name="email"]').value = document.querySelectorAll('.bg-gray-50 .font-medium')[1].textContent.trim();
            editModal.classList.remove('hidden');
        };
        document.getElementById('edit-form').onsubmit = function(e) {
            e.preventDefault();
            // 更新页面昵称和邮箱
            document.querySelector('h2.text-2xl').textContent = this.nickname.value;
            document.querySelectorAll('.bg-gray-50 .font-medium')[1].textContent = this.email.value;
            closeEditModal();
            alert('资料已更新');
        };
        // 点击弹窗背景关闭
        editModal.addEventListener('click', function(e) { if (e.target === this) closeEditModal(); });

        // 3. 订单tab切换（假数据筛选）
        const orderTabs = document.querySelectorAll('.order-tab a');
        const allOrders = [
            {id: 'WX20231128001', type: '待付款', title: '羽绒服清洗 · 2件', price: 89, date: '2023-11-28'},
            {id: 'WX20231125002', type: '进行中', title: '运动鞋保养 · 1双', price: 45, date: '2023-11-25'},
            {id: 'WX20231120003', type: '已完成', title: '床单清洗 · 3件', price: 60, date: '2023-11-20'},
            {id: 'WX20231118004', type: '待服务', title: '窗帘清洗 · 1套', price: 120, date: '2023-11-18'}
        ];
        function renderRecentOrders(type) {
            const container = document.querySelector('.mt-6.border-t.pt-6 .space-y-4');
            container.innerHTML = '';
            let filtered = type && type !== '全部订单' ? allOrders.filter(o => o.type === type) : allOrders;
            if (filtered.length === 0) {
                container.innerHTML = '<div class="text-gray-400 text-center py-6">暂无相关订单</div>';
                return;
            }
            filtered.forEach(order => {
                const icon = order.title.includes('鞋') ? 'fa-shoe-prints' : order.title.includes('床单') ? 'fa-bed' : order.title.includes('窗帘') ? 'fa-window-maximize' : 'fa-tshirt';
                container.innerHTML += `
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg order-item cursor-pointer" data-id="${order.id}">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-primary bg-opacity-10 rounded-full flex items-center justify-center">
                            <i class="fas ${icon} text-primary icon-wrapper w-5 h-5"></i>
                        </div>
                        <div>
                            <div class="font-medium">订单 #${order.id}</div>
                            <div class="text-sm text-gray-500">${order.title}</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="font-medium">¥${order.price}.00</div>
                        <div class="text-sm text-gray-500">${order.date}</div>
                    </div>
                </div>`;
            });
            bindOrderDetailEvents();
        }
        orderTabs.forEach(tab => {
            tab.onclick = function(e) {
                e.preventDefault();
                orderTabs.forEach(t => t.classList.remove('bg-gray-100', 'font-bold'));
                this.classList.add('bg-gray-100', 'font-bold');
                renderRecentOrders(this.innerText.trim());
            };
        });
        // 默认渲染全部订单
        renderRecentOrders();

        // 4. 最近订单点击弹窗详情
        function bindOrderDetailEvents() {
            document.querySelectorAll('.order-item').forEach(item => {
                item.onclick = function() {
                    const id = this.getAttribute('data-id');
                    const order = allOrders.find(o => o.id === id);
                    showOrderDetail(order);
                };
            });
        }
        function showOrderDetail(order) {
            const modal = document.getElementById('order-detail-modal');
            const content = document.getElementById('order-detail-content');
            content.innerHTML = `
                <div><strong>订单编号：</strong>${order.id}</div>
                <div><strong>服务内容：</strong>${order.title}</div>
                <div><strong>订单类型：</strong>${order.type}</div>
                <div><strong>订单金额：</strong>¥${order.price}.00</div>
                <div><strong>下单时间：</strong>${order.date}</div>
                <div class='mt-2'><strong>配送员联系方式：</strong>138-xxxx-xxxx / 微信：kuaidi123</div>
            `;
            modal.classList.remove('hidden');
        }
        function closeOrderDetailModal() {
            document.getElementById('order-detail-modal').classList.add('hidden');
        }
        document.getElementById('order-detail-modal').addEventListener('click', function(e) {
            if (e.target === this) closeOrderDetailModal();
        });

        // 5. 功能区块点击弹窗/跳转
        const featureMap = {
            '我的钱包': {title: '我的钱包', content: '当前余额：¥256.50\n最近消费：¥89.00（2023-11-28）'},
            '收货地址': {title: '收货地址', content: '您已保存3个收货地址。'},
            '优惠券': {title: '优惠券', content: '可用优惠券5张，最高立减20元。'},
            '积分商城': {title: '积分商城', content: '您有2,850积分，可兑换多种好礼。'},
            '支付方式': {title: '支付方式', content: '已绑定2种支付方式。'},
            '客服中心': {title: '客服中心', content: '24小时在线客服，服务热线：400-888-9999。'},
            '洗衣记录': {title: '洗衣记录', content: '可查看您的全部历史洗衣订单。'},
            '设置': {title: '设置', content: '账户与安全设置。'},
        };
        document.querySelectorAll('.grid a.bg-white').forEach(a => {
            a.onclick = function(e) {
                e.preventDefault();
                const title = this.querySelector('.font-medium').innerText.trim();
                if (featureMap[title]) {
                    document.getElementById('feature-modal-title').innerText = featureMap[title].title;
                    document.getElementById('feature-modal-content').innerText = featureMap[title].content;
                    document.getElementById('feature-modal').classList.remove('hidden');
                } else {
                    alert('功能开发中');
                }
            };
        });
        function closeFeatureModal() {
            document.getElementById('feature-modal').classList.add('hidden');
        }
        document.getElementById('feature-modal').addEventListener('click', function(e) {
            if (e.target === this) closeFeatureModal();
        });

        // 6. "查看全部"跳转到订单页
        document.querySelector('.text-primary.flex.items-center').onclick = function(e) {
            e.preventDefault();
            window.location.href = 'price.html';
        };
    </script>
</body>
</html>